
<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import pub from '../widget.pub.js'
  import scroll from '../widget.scroll.js'
  import src from '../widget.src.js'
  
  let index = 0

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Tree',
        remark: `
          <div>Leaf节点是否有三角展开符的判定规则：</div>
          <div>&nbsp; 1. 如果有设置children参数，则有展开符</div>
          <div>&nbsp; 2. 如果没有children，但设置了src，则有展开符</div>`,
        extends: [scroll, pub, src],
        attrs: [
          {
            name: 'children',
            type: 'Array',
            remark: '子节点数据集',
            default: ''
          },
        ],
        methods: [{
          name: 'getCurrent()',
          remark: '获取聚焦的Leaf节点',
          option: '',
          return: 'Leaf',
        }, {
          name: 'viewCurrent()',
          remark: '使聚焦的Leaf节点滚动到可视区域',
          option: '',
        }],
        slots: [{
          name: 'default',
          remark: 'Leaf集合',
          option: 'w-leaf'
        }],
        computed: [{
          name: 'level',
          remark: '层级',
          type: 'Number',
          option: ''
        }],
        examples: [{
          remark: '带图标，点击树节点有聚焦效果',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-tree :current="focusLeafID" :children="treeList">
                <template #default="{item}">
                  <w-leaf :key="item.id" :text="item.text" :children="item.children" :expanded="item.expanded" @click="clickLeaf(item)"
                    expandedIcon=".f-i .f-i-folder-open-full" collapsedIcon=".f-i .f-i-folder-full" icon=".f-i .f-i-file"></w-leaf>
                </template>
              </w-tree>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    focusLeafID: null,
                    treeList: [
                      {id: '10000', text: '福建省', expanded: true, children: [
                        {id: '10100', text: '福州市'},
                        {id: '10200', text: '厦门市'}
                      ]},
                      {id: '20000', text: '广东省', expanded: true, children: [
                        {id: '20100', text: '广州市'},
                        {id: '20200', text: '深圳市', children: [
                          {id: '20101', text: '福田区'},
                          {id: '20202', text: '罗湖区'}
                        ]}
                      ]},
                    ]
                  }
                },
                methods: {
                  clickLeaf(data) {
                    this.focusLeafID = data.id
                  }
                }
              }
            </${'script'}>
            `,
					comp: {
						data() {
						  return {
						    focusLeafID: null,
						    treeList: [
						      {id: '10000', text: '福建省', expanded: true, children: [
						        {id: '10100', text: '福州市'},
						        {id: '10200', text: '厦门市'}
						      ]},
						      {id: '20000', text: '广东省', expanded: true, children: [
						        {id: '20100', text: '广州市'},
						        {id: '20200', text: '深圳市', children: [
						          {id: '20101', text: '福田区'},
						          {id: '20202', text: '罗湖区'}
						        ]}
						      ]},
						    ]
						  }
						},
						methods: {
						  clickLeaf(data) {
						    this.focusLeafID = data.id
						  }
						}
					}
        }, {
          remark: '有复选框的树',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-tree :children="treeList">
                <template #default="{item}">
                  <w-leaf :key="item.id" :text="item.text" :expanded="item.expanded" :children="item.children" :box-sync="true">
                    <template #box>
                      <!-- 可以尝试换成 w-checkbox 和 w-radio -->
                      <w-triplebox name="selectItem" :value="item.id" v-model="treeSelectValue" :data="item"></w-triplebox>
                    </template>
                  </w-leaf>
                </template>
              </w-tree>
            </template>
            <${'script'}>
              export default {
                data() {
                  return {
                    treeList: [
                      {id: '10000', text: '福建省', expanded: true, children: [
                        {id: '10100', text: '福州市'},
                        {id: '10200', text: '厦门市'}
                      ]},
                      {id: '20000', text: '广东省', expanded: true, children: [
                        {id: '20100', text: '广州市'},
                        {id: '20200', text: '深圳市', expanded: true, children: [
                          {id: '20101', text: '福田区'},
                          {id: '20202', text: '罗湖区'}
                        ]}
                      ]},
                    ],
                    treeSelectValue: []
                  }
                }
              }
            </${'script'}>
            `,
					comp: {
						data() {
						  return {
						    treeList: [
						      {id: '10000', text: '福建省', expanded: true, children: [
						        {id: '10100', text: '福州市'},
						        {id: '10200', text: '厦门市'}
						      ]},
						      {id: '20000', text: '广东省', expanded: true, children: [
						        {id: '20100', text: '广州市'},
						        {id: '20200', text: '深圳市', expanded: true, children: [
						          {id: '20101', text: '福田区'},
						          {id: '20202', text: '罗湖区'}
						        ]}
						      ]},
						    ],
                treeSelectValue: []
						  }
						}
					}
        }, {
            remark: '树节点右边显示一个操作图标',
            type: 'html',
            view: true,
            code: `
              <template>
                <w-tree :current="focusLeafID" :children="treeList">
                  <template #default="{item}">
                    <w-leaf :key="item.id" :text="item.text" :children="item.children" :expanded="item.expanded">
                      <template #text>
                        <w-horizontal align="between" valign="middle">
                          <w-html width="*" line="1">{{item.text}}</w-html>
                          <i class="f-i f-i-edit"></i>
                        </w-horizontal>
                      </template>
                    </w-leaf>
                  </template>
                </w-tree>
              </template>
              <${'script'}>
                export default {
                  data() {
                    return {
                      focusLeafID: null,
                      treeList: [
                        {id: '10000', text: '福建省', expanded: true, children: [
                          {id: '10100', text: '福州市'},
                          {id: '10200', text: '厦门市'}
                        ]}
                      ]
                    }
                  }
                }
              </${'script'}>
              `,
						comp: {
							data() {
							  return {
							    focusLeafID: null,
							    treeList: [
							      {id: '10000', text: '福建省', expanded: true, children: [
							        {id: '10100', text: '福州市'},
							        {id: '10200', text: '厦门市'}
							      ]}
							    ]
							  }
							}
						}
        }, {
          remark: '从服务器获取数据展开子节点',
          type: 'html',
          view: true,
          code: `
            <template>
              <w-tree :children="treeList">
                <template #default="{item}">
                  <w-leaf :key="item.id" :text="item.text" :children="item.children" :src="getSrc(item)"></w-leaf>
                </template>
              </w-tree>
            </template>
            <${'script'}>
              let index = 0
              export default {
                data() {
                  return {
                    treeList: [
                      {id: '10000', text: '福建省', hasChild: true},
                      {id: '20000', text: '广东省', hasChild: true},
                    ]
                  }
                },
                methods: {
                  getSrc(item) {
                    if (!item.hasChild) return null
                    //return () => $.ajax.get($.urlParam('/getdata.php', {id: item.id})).then(res => item.children = res)
                    //在API环境下用下面的方法模拟获取远端数据；实际开发中应使用类似上面注释的语句
                    return (leaf) => new Promise(resolve => {
                      let hasChild = leaf.level == 0
                      setTimeout(() => resolve([{id: ++index, text: '子节点' + index, hasChild}, {id: ++index, text: '子节点' + index, hasChild}]), 300)
                    }).then(res => item.children = res)
                  }
                }
              }
            </${'script'}>
            `,
					comp: {
						data() {
						  return {
						    treeList: [
						      {id: '10000', text: '福建省', hasChild: true},
						      {id: '20000', text: '广东省', hasChild: true},
						    ]
						  }
						},
						methods: {
						  getSrc(item) {
						    if (!item.hasChild) return null
						    //return () => $.ajax.get($.urlParam('/getdata.php', {id: item.id})).then(res => item.children = res)
						    //在API环境下用下面的方法模拟获取远端数据；实际开发中应使用类似上面注释的语句
						    return (leaf) => new Promise(resolve => {
						      let hasChild = leaf.level == 0
						      setTimeout(() => resolve([{id: ++index, text: '子节点' + index, hasChild}, {id: ++index, text: '子节点' + index, hasChild}]), 300)
						    }).then(res => item.children = res)
						  }
						}
					}
        }]
      }
    }

  }
</script>

<style>
</style>
